<template>
  <div class='direct'>
    <div class='direct-header mb20' >
      <!-- <el-input placeholder="输入内容搜索消息" v-model="messageSearch" class="input-with-select clearfix">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input> -->
        <el-select v-model="sendSearch " placeholder="选择发送人筛选消息" @change='sendSearchChange' clearable>
          <el-option label="发明人" value="5" v-if="/^(2|4)$/.test(role_id)"></el-option>
          <el-option label="审核员" value="3" v-if="/^(2)$/.test(role_id)"></el-option>
          <el-option label="代理人" value="2" v-if="/^(3|4|5)$/.test(role_id)"></el-option>
          <el-option label="专属顾问" value="4" v-if="/^(2|5)$/.test(role_id)"></el-option>
        </el-select>
        <el-button type="primary"  class='ml20 addDirect' @click="addDirect" v-if="/^(2|5)$/.test(role_id)">发送消息</el-button>

      <el-button type="primary" icon="el-icon-delete" class='fr batchDeletion' @click='batchDeletion'></el-button>
      <div v-if="showDel" class='allDel'>
        <el-checkbox v-model="AlldelChecked" @change='AllDelChange'>全选</el-checkbox>
        <template v-if="getDelSums > 0">
          <span class='tips'>确认删除<i class="font_danger"> {{getDelSums}} </i>条记录吗</span>
          <el-button type="text" class='allDel_btns ml20' @click="determineDel">确认</el-button>
          <el-button type="text" class='allDel_btns' @click="cancelDel">取消</el-button>
        </template>
      </div>
    </div>
    <template v-if="messageData.length">
      <div v-for="(item, index) in messageData" :key="index" v-loading='loading' class="message clearfix">
        <div class='message-checkbox' v-if="showDel">
          <el-checkbox v-model="item.delChecked"></el-checkbox>
        </div>
        <div class="message-item" @click='lookDetails(item)' id='message'>
          <el-avatar :size="avatarSize">{{item.replyRoleId | getNewsRoleName}}</el-avatar>
          <div class="message-content">
            <div class="title">
              <span>{{item.replyUserName}}</span>
            </div>
            <div class='news'>
              <span :class='isDirectReadOrNo(item.num) ? "newsRead" : "cddd"'>
                <!-- {{isDirectReadOrNo(item.num) ? `[${item.num}条未读]` : '[已读]'}} -->
                {{isDirectReadOrNo(item.num) ? `[未读]` : '[已读]'}}
              </span>
              <span>{{item.news}}</span>
            </div>
          </div>
          <div class="message-time fr">
            <span>{{item.last_r_created_at}}</span>
          </div>
        </div>
      </div>
    </template>
    <p v-else class='noData'>
      暂无私信
    </p>
    <directDetails ref="directDetails" @refresh='getData'/>
    <addDirect ref="addDirect" @refresh='getData'></addDirect>
  </div>
</template>

<script>
import directDetails from './directDetails'
import addDirect from './addDirect'
import { getMyInfo } from "~/api/user"
export default {
  data () {
    return {
      messageData: [],
      loading: true,
      avatarSize: 35,
      messageSearch:'',
      showDel: false,
      role_id: this.$store.state.user.role_id,
      sendSearch: '',
      AlldelChecked: false,
    }
  },
  components: {
    directDetails,
    addDirect
  },
  computed: {
    getDelSums () {
      let delData = this.messageData.filter((item)=> item.delChecked )
      return delData.length
    }
  },
  watch: {
    messageData: {
      handler: function(val) {
          let isAllDel = val.some(v => v.delChecked == false)
          if (isAllDel) {
            this.AlldelChecked = false
          }
      },
      deep: true
    }
  },
  methods: {
    // 发起私信
    addDirect() {
      this.$refs['addDirect'].show(this.role_id)
    },
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
        this.roleID = this.myInfo.role_id
      }
    },
    sendSearchChange (value) {
      let params = {
        role_id: value
      }
      this.getData(params)
    },
    getData(args) {
      let params = {
        status: [1,2],
      }
      if (args) {
        params = {...params, ...args}
      }
      this.$axios.get('api/news/get_parent_pr_news', {params: params}).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          let messageData = []
          for (let i = 0; i < data.length; i++) {
            this.$set(data[i],"delChecked", false)
            if (data[i].son_news.length) {
              data[i].son_news[0].replyRoleId = data[i].replyRoleId
              data[i].son_news[0].replyUserName = data[i].replyUserName
              data[i].son_news[0].num = data[i].num
              data[i].son_news[0].last_r_created_at = data[i].last_r_created_at
              messageData.push(data[i].son_news[0])
            } else {
              if (!data[i].is_del) {
                messageData.push(data[i])
              }
            }
          }
          this.messageData = messageData
          this.getMyinfo()
          this.loading = false
        }
      })
    },
    lookDetails(item) {
      this.$refs['directDetails'].show(item)
    },
    batchDeletion () {
      this.showDel = !this.showDel
      if(!this.showDel) {
        for (let i = 0; i < this.messageData.length; i++) {
          this.$set(this.messageData[i],"delChecked", false)
        }
      }
    },
    isDirectReadOrNo (value) {
      if (value > 0) {
        return true;
      } else {
        return false;
      }
    },
    // 确定删除
    determineDel() {
      let delData = this.messageData.filter((item)=> item.delChecked )
      let delDataChecked = []
      for (let i = 0; i <delData.length; i++) {

        if (delData[i].pid) {
          delDataChecked.push(delData[i].pid)
        } else {
          delDataChecked.push(delData[i].id)
        }
      }
      delDataChecked.join(",")

        this.$confirm(`<span>确认删除 <i class="font_danger">${this.getDelSums}</i> 条记录吗</span>`, '删除消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          center: true,
          type: 'warning'
        }).then(() => {
          let params = {
            pid: delDataChecked
          }
          this.$axios.put(`api/news/del_news`, params).then( res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message:'删除成功'
              })
              this.getData()
              this.showDel = false
            } else {
              this.$message.error(res.data.message)
            }
          })
        }).catch(() => {
        })
    },
    // 取消删除
    cancelDel () {
      this.showDel = false
      for (let i = 0; i < this.messageData.length; i++) {
        this.$set(this.messageData[i],"delChecked", false)
      }
    },
    AllDelChange(val) {
      for (let i = 0; i < this.messageData.length; i++) {
        this.$set(this.messageData[i],"delChecked", val)
      }
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .direct {

    .noData {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      margin-top: 10px;
    }
    &-header {
      min-height: 40px;
      .el-input {
        width: 50%;
      }
      .batchDeletion {
        font-size: 17px;
      }
      .el-button {
        height: 40px;
      }
      .el-select {
        width: 200px;
        .el-input {
          width: 100%;
        }
      }
      .addDirect {
        // padding: 9px 20px;
        i {
          font-size: 20px;
        }
      }
      .allDel {
        height: 40px;
        margin: 10px 0 10px 0;
        .tips {
          margin-left: 10px;
        }
        .el-checkbox {
          line-height: 40px;
        }
      }
    }
    .message {
      display: flex;
      border-bottom: 1px solid #E4E7ED;

      &-checkbox {
        min-width: 17px;
        display: inline-block;
        vertical-align: middle;
        margin-top: 8px;
      }
      #message {
        .el-badge {
          .el-badge__content {
            border: none ;
          }
          .is-fixed {
            top: 0 ;
            right: 0;
            padding: 0;
          }
        }
      }
      &-item {
        padding: 10px;
        width: 100%;
        min-width: 100%;
        vertical-align: middle;
        box-sizing: border-box;
        cursor: pointer;

        .el-avatar {
          // margin-right: 10px;
          background: #3296FA;
          font-size: 12px;
        }


      }
      &-item:hover {
        background: rgba(0,0,0,.03);
      }
      &-content {
        margin-left: 10px;
        vertical-align: top;
        display: inline-block;
        width:  calc(70% - 112px);
        .title {
          user-select: text;
          line-height: 24px;
          span {
            max-width: 150px;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #005980;
          }
        }
        .news {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #8c92a4;
        }
      }
      &-time {
        vertical-align: top;
        display: inline-block;
        color: #8c92a4;
      }
    }
  }

</style>
